
import React, { Component } from 'react';
import { Flex } from 'antd-mobile'
import { get_Area_Data, get_Current_City } from '../utils/http_biz.js'
// 1.0 withRoter使用步骤1：导入withRouter方法
import { Link, withRouter } from 'react-router-dom'

class Search extends Component {
    state = { cityName: '深圳' }
    // 1.0 页面加载完毕的生命周期方法中调用百度地图获取到当前城市名称
    async componentDidMount() {
        //1.0  实例化LoclCity的对象实例,
        // 注意点，在组件中使用window上的一个对象，需要显示调用
        let { label } = await get_Current_City();
        this.setState({ cityName: label })

        // var myCity = new window.BMap.LocalCity();
        // myCity.get(async (res) => {
        //     // 2.0 获取城市名称
        //     let cityName = res.name;

        //     // 3.0 根据百度地图获取的城市名称调用后台接口获取到城市对象（{label:'城市名',value:'城市id'}）
        //     // 原因：1、因为我们的服务器接口只有北，上，广深，四个城市的数据，所以如果是这4个城市之外的城市名称则统一返回上海
        //     // 2、将来我们在做地图界面的时候，要根据城市的id才能请求服务器接口获取到当前城市的所有房源数据，所以此处我们统一进行服务器请求到城市对象
        //     let { label, value } = await get_Area_Data({ name: cityName })
        //     // 4.0 修改state中的cityName的值
        //     this.setState({ cityName: label })

        //     // 5.0 将当前获取到的城市数据保存到localStorage中，以备地图找房页面进行获取
        //     localStorage.setItem("cur_city", JSON.stringify({ label, value }));
        // })
    }

    render() {
        return (
            <div className="search">
                <Flex className="" justify="between">
                    <div className="left">
                        <Flex>
                            <div className="area">
                                <span onClick={() => { this.props.history.push('/citylist') }}>
                                    {this.state.cityName}
                                </span>
                                <i className="iconfont icon-arrow arrow"></i>
                            </div>
                            <div className="seachicon">
                                <Flex>
                                    <input type="text" placeholder="请输入小区或地址" />

                                    <i className="iconfont icon-seach"></i>
                                </Flex>
                            </div>
                        </Flex>
                    </div>

                    {/* 进入地图找房的小图标 */}
                    {/* <Link to="/home/findhouse"> */}
                    {/* 注意：编程式导航一定是通过Route组件的组件才可以使用，当前Searc组件没有通过Route注册所以，history为undefined
                     解决方案：将Search组件通过 withRouter方法包装一些就可以让Search组件中的history对象有值
                     
                    */}
                    <i onClick={() => { this.props.history.push('/home/findhouse') }} className="iconfont icon-map right"></i>
                    {/* </Link> */}

                </Flex>
            </div>

        );
    }
}

// 2.0 withRoter使用步骤2：在导出组件之前使用withRouter对组件对象进行包装，自动注入一个history对象到组件中，确保this.props.history有值
export default withRouter(Search);